<template>
	<QCard
		flat
		bordered
		class="lexmis-ApiTable">
		<QToolbar>
			<div class="title">{{name}}</div>
		</QToolbar>
		<QSeparator/>
		<QTabs
			v-model="curTab"
			dense
			inline-label
			align="left"
			indicator-color="primary"
			class="bg-grey-2 text-grey-7">
			<QTab
				v-for="(item,index) in data"
				:key="index"
				:name="index"
				:label="item.tabName">
				<QBadge :label="item.list.length" class="q-ml-xs"/>
			</QTab>
		</QTabs>
		<QSeparator/>
		<QTabPanels v-model="curTab">
			<QTabPanel
				v-for="(item,index) in data"
				:key="index">

			</QTabPanel>
		</QTabPanels>
	</QCard>
</template>

<script>
import {
	QToolbar,
	QSeparator,
	QTabs,
	QTab,
	QTabPanels,
	QTabPanel,
	QCard,
	QBadge
} from 'quasar';

export default {
	name:'ApiTable',
	components:{
		QToolbar,
		QSeparator,
		QTabs,
		QTab,
		QTabPanels,
		QTabPanel,
		QCard,
		QBadge,
	},
	props:{
		data:{
			type:Array,
			default(){
				return [];
			}
		},
		name:{
			type:String,
			default:''
		}
	},
	data(){
		return {
			curTab:0
		};
	}
};
</script>

<style lang="scss">
.lexmis-ApiTable{
	.title{
		background:#e0e0e0;
		color:#616161;
		font-size:16px;
		line-height:32px;
		border-radius:3px 5px 5px 0;
		position:absolute;
		left:-11px;
		top:50%;
		transform:translateY(-50%);
		padding:0 10px 0 24px;
		&:after{
			content:"";
			position:absolute;
			top:100%;
			left:0;
			width:0;
			height:0;
			border:0 solid transparent;
			border-top-color:#bebebe;
			border-width:9px 0 0 11px;
		}
	}
}
</style>
